<template>
  <div>
    <div class="setp" v-for="(item, index) in stepsList" :key="index" :class="{ active: index === activeIndex }" @click="emitSetpClick(index)">
      <div class="setp-head">
        <span class="setp-spot"></span>
        <span class="setp-separator" v-if="index < stepsList.length - 1"></span>
      </div>
      <div class="setp-conten">
        <div class="setp-title">{{ item.eventTypeZh }}</div>
        <div class="step-description">
          <span>{{ item.eventDate }}</span>
          <span class="location-url" @click="openLocationUrl(item.carrierLocationUrl)">{{ item.eventLocation }}</span>
          <!-- <span>{{ item.plateNumber }}</span>
          <span>{{ item.driverName }}</span>
          <span>{{ item.driverPhone }}</span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    stepsList: {
      type: Array,
      default: () => []
    },
    active: {
      type: Number
    }
  },
  data() {
    return {
      activeIndex: this.active - 1
    };
  },
  methods: {
    // 打开窗口
    openLocationUrl(url) {
      window.open(url);
    },
    emitSetpClick(index) {
      this.activeIndex = index;
      this.$emit('switchForm', this.stepsList[index]);
    }
  }
};
</script>

<style lang="scss" scoped>
.setp {
  display: flex;
  cursor: pointer;
  .setp-head {
    width: 24px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      display: block;
    }
    .setp-spot {
      border-radius: 50%;
      width: 20px;
      height: 20px;
      background-color: #ccc;
    }
    .setp-separator {
      width: 2px;
      height: calc(100% - 20px);
      min-height: 30px;
      background-color: #ccc;
      margin: 0px auto;
    }
  }
  .setp-conten {
    .setp-title {
      text-align: left;
      font-size: 20px;
    }
    .step-description {
      padding: 5px 0;
      display: flex;
      span {
        margin: 0 20px;
      }
      .location-url {
        color: black;
        cursor: pointer;
      }
    }
  }
}
.active {
  color: #1989fa;
  .setp-head {
    .setp-spot {
      background-color: #1989fa;
    }
  }
}
</style>
